<template>
	<view class="advert">
		<view class="advert-content">
			<view class="advert-content-tabs">
				<u-search placeholder="搜索" v-model="ProductName" @search="getTickettList" @custom="getTickettList" @clear="getTickettList"></u-search>
			</view>
			<u-list class="tickett" scroll-y="true" @scrolltolower="handleScrollPull(true)">
				<empty v-if="!TickettList.length" title="暂无" />
				<view class="tickett-item" v-for="(tickett, index) in TickettList" :key="index" @click="handleTickettItem(tickett)">
					<view class="tickett-item-image">
						<img :src="tickett.Img" alt="" />
					</view>
					<view class="tickett-item-content">
						<view class="title">
							<img class="tag" src="./static/xdcj.png" alt="">
							<text>{{tickett.Name || ''}}</text>
						</view>
						
						<view class="substance">
							<rich-text :nodes="tickett.Substance"></rich-text>
						</view>
						<view class="substance-tip">
							{{tickett.SubstanceTip || ''}}
						</view>
						<view class="substance-tip">无需取票 一经核销，概不退换</view>
						<view class="options">
							<text class="market-price">¥{{tickett.MarketPrice || 0}}</text>
							<text class="sale-price">¥{{tickett.ShowPrice || 0}}</text>
							<button type="default" class="button-price">购票</button>
						</view>
					</view>
				</view>
			</u-list>
		</view>
	</view>
</template>

<script>
import { getGoodsList } from '@/api/mall.js';
import empty from '@/components/empty.vue'
export default {
	components: { empty },
	data () {
		return {
			ProductName: '',	//	搜索
			AdvertList: [],
			Tabs: [],
			TabActive: 0,
			PageIndex: 1,
			loadingType: 'none',
			TickettData: [],
		}
	},
	mounted () {
		this.getTickettList()
	},
	computed: {
		// 订单列表
		TickettList() {
			const { TickettData } = this;
			TickettData.sort(function(n1,n2){
				return n1.Sort-n2.Sort
			});
			TickettData.map(item => {
				this.ticketItemName(item)
			})
			return TickettData || [];
		}
	},
	onPullDownRefresh() {
		console.log('refresh');
		this.PageIndex = 1;
		this.getTickettList('refresh')
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		ticketItemName(item) {
			const { Id } = item || {}
			switch (Id) {
				case '3086':
				case 3086:
				case '3106':// 余量为0门票
				case 3106:
					item.Substance = '适用人群：1.5m以上'
					item.SubstanceTip = '当日可订|快速入园';
					break;
				case '3087':
				case 3087:
				case '3107':// 余量为0门票
				case 3107:
					item.Substance = '适用人群：80cm至1.5m儿童'
					item.SubstanceTip = '当日可订|快速入园';
					break;
				case '3091':
				case 3091:
				case '3108':// 余量为0门票
				case 3108:
					item.Substance = '套餐包含：含1张成人门票和1张儿童门'
					item.SubstanceTip = '当日可订|快速入园';
					break;
				case '3092':
				case 3092:
				case '3109':// 余量为0门票
				case 3109:
					item.Substance = '套餐包含：含2张成人门票和1张儿童门票'
					item.SubstanceTip = '当日可订|快速入园';
					break;
				case '3068':
				case 3068:
					item.Substance = '适用人群：所有游客，一人一票'
					break;
				case '3114':
				case  3114:
					item.Substance = '适用人群：所有游客，三人一码'
					break;
				case '3115':
				case  3115:
					item.Substance = '适用人群：所有游客，双人一码'
					break;
				case '3116':
				case  3116:
					item.Substance = '适用人群：所有游客，五人一码'
					break;
				case '3117':
				case  3117:
					item.Substance = '适用人群：所有游客，七人一码'
					break;
				case '3076':
				case  3076:
					item.Substance = '特惠套餐！每人每日限购一份'
					item.SubstanceTip = '周末节假日通用'
					break;
				case '3093':
				case  3093:
				case '3110':// 余量为0门票
				case 3110:
					item.Substance = '套餐包含：含1张成人门票和2张儿童门票'
					item.SubstanceTip = '当日可订|快速入园'
					break;
				case '3095':
				case  3095:
				case '3111':// 余量为0门票
				case 3111:
					item.Substance = '套餐包含：含2张成人门票和2张儿童门票'
					item.SubstanceTip = '当日可订|快速入园'
					break;
				case '3102':
				case  3102:
					item.Substance = '套餐包含：含2张成人门票和1张儿童门'
					item.SubstanceTip = '无限次入园|法定节假日不可用'
					break;
				case '3103':
				case  3103:
					item.Substance = '套餐包含：含2张成人门票和2张儿童门票'
					item.SubstanceTip = '无限次入园|全年通用'
					break;
				case '3080':
				case  3080:
					item.Substance = '特殊人群使用，详见预订须知'
					break;
			}
		},
		// 获取票务列表
		getTickettList (update) {
			const loadingList = ['none']
			if (!loadingList.includes(this.loadingType)) return;
			const params = {"TypeId": 11,"Index":this.PageIndex,"Size":10,"ProductName": this.ProductName,"FiledOrder":"ShowPrice desc"}
			console.log('loadingType', this.loadingType, this.PageIndex)
			getGoodsList(params).then(res => {
				const { Data, Total } = res || {};
				this.loadingType = update;
				setTimeout(() => {
					this.loadingType = 'none'
				}, 100)
				if (this.PageIndex === 1) {
					this.TickettData = Data || [];
					return;
				}
				this.TickettData = [...this.TickettData, ...Data];
				
				if (this.TickettData.length >= Total) {
					this.loadingType = 'nomore'
				}
			})
		},
		handleScrollPull() {
			this.PageIndex += 1;
			this.getTickettList('pull')
		},
		handleTickettItem(item) {
			const { Id } = item || {}
			uni.navigateTo({
				url: `/ticketing/details/index?id=${Id}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.advert {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #f7f7f7;
	* {
		box-sizing: border-box;
	}
	&-swiper{
		height: 340rpx;
		padding: 14rpx 16rpx;
		background: #fff;
		&-item {
			&-image{
				border-radius: 10rpx;
				width: 100%;
				height: 100%;
			}
		}
	}
	&-content{
		margin-top: 16rpx;
		flex: 1;
		background: #fff;
		&-tabs{
			width: 100%;
			height: 70rpx;
			overflow-x: scroll;
			overflow-y: hidden;
			padding: 0 20rpx;
			&::-webkit-scrollbar{
				display: none;
			}
			.tabs{
				display: flex;
				flex-wrap: nowrap;
				transition: transform .5s;
				width: max-content;
				&-item{
					height: 70rpx;
					line-height: 70rpx;
					padding: 0 20rpx;
					color: #717d9d;
					position: relative;
					&::after{
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						content: '';
						display: block;
						width: 60%;
						height: 6rpx;
					}
					&.active{
						color: #31d2dc;
						&::after{
							background: #31d2dc;
						}
					}
				}
			}
			
		}
		.tickett{
			padding: 20rpx;
			box-sizing: border-box;
			height: calc(100% - 70rpx);
			&-item{
				width: 100%;
				min-height: 100rpx;
				border-radius: 20rpx;
				background: #fff;
				box-shadow: rgb(245, 245, 245) 0px 0px 10px 2px;
				margin-bottom: 20rpx;
				padding: 16px;
				display: flex;
				&-image{
					width: 200rpx;
					height: 120rpx;
					img{
						border-radius: 6rpx;
						width: 100%;
						height: 100%;
					}
					
				}
				&-content{
					width: calc(100% - 200rpx);
					margin-left: 20rpx;
					.title{
						font-size: 28rpx;
						line-height: 34rpx;
						line-height: 34rpx;
						color: #45506c;
						*{
							line-height: 34rpx;
						}
						.tag{
							position: relative;
							top: 2px;
							width: 88rpx;
							height: 30rpx;
						}
					}
					.substance{
						margin-top: 6rpx;
						font-size: 24rpx;
						color: #30cfda;
					}
					.substance-tip{
						margin-top: 6rpx;
						font-size: 24rpx;
						color: #999;
					}
					.options{
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;
						.market-price{
							margin-right: 20rpx;
							font-size: 26rpx;
							color: #ccc;
							text-decoration: line-through;
						}
						.sale-price{
							margin-right: 20rpx;
							font-size: 32rpx;
							color: #ff0000;
						}
						.button-price{
							margin: unset;
							background-color: #30cfda;
							height: 60rpx;
							line-height: 60rpx;
							padding: 0 20rpx;
							font-size: 24rpx;
							color: #fff;
						}
					}
				}
			}
		}
	}
}
</style>